<template>
  <div class="vertical-toolbar">
    <VerticalToolbar :tools="toolList" @tool-click="onToolClick" />
  </div>
  <!--  <div class="layout">-->
  <!--    <aside class="sidebar-left"></aside>-->

  <!--    <main class="main-content">-->
  <!--      &lt;!&ndash; 中间内容，留空或放地图上层控件 &ndash;&gt;-->
  <!--    </main>-->

  <!--    <aside class="sidebar-right">-->
  <!--      &lt;!&ndash; 右侧工具栏 &ndash;&gt;-->
  <!--      <p>相机位置：{{ formattedCameraInfo }}</p>-->
  <!--      <p>点击坐标：{{ formattedMousePosition }}</p>-->
  <!--    </aside>-->
  <!--  </div>-->

  <div class="sidebar-right">
    <p>相机位置：{{ formattedCameraInfo }}</p>
    <p>点击坐标：{{ formattedMousePosition }}</p>
  </div>
</template>
<script setup lang="ts">
const { __viewer } = window;
import { CameraInfo, getMousePosition, startCameraInfoTracking } from '@/utils/InitViewerContainer';
// import { startCameraInfoTracking, CameraInfo } from '@/utils/CameraInfoTracker';
import { SuperMap3D } from '@/utils/supermap3d';
//导入右侧工具栏及图标
import VerticalToolbar from '@/components/VerticalToolbar.vue';
//导入量算工具的初始化及启动类
import { initMeasureHandlers, startDistanceMeasure, startAreaMeasure, startHeightMeasure, stopAll } from '@/utils/measure/measure';
import AnalysisToolbar from '@/components/AnalysisToolbar.vue';

// import { ProfileTools } from '@/utils/ProfileTools';
// import { Tooltip } from '@/utils/tooltips/impl/Tooltip';
//
// let analysis: ProfileTools;

//begin 分析工具初始化 开始
const viewer = __viewer;
import { useAnalysis } from '@/composables/useAnalysis';
import { AnalysisType } from '@/utils/analysis/AnalysisTools';
const { activateAnalysis, clearAllAnalysis } = useAnalysis(viewer);

function activate(type: AnalysisType) {
  activateAnalysis(type);
}

//end 分析工具初始化 结束

const toolList = [
  { icon: '/src/assets/icons/Altimetry.png', action: 'measure-height', tooltip: '测高' },
  { icon: '/src/assets/icons/Ranging.png', action: 'measure-distance', tooltip: '测距' },
  { icon: '/src/assets/icons/MeasureArea.png', action: 'measure-area', tooltip: '测面积' },
  { icon: '/src/assets/icons/Profile.png', action: 'profile-analysis', tooltip: '剖面分析' },
  { icon: '/src/assets/icons/Roam.png', action: 'pipeline-roaming', tooltip: '管道漫游' },
  { icon: '/src/assets/icons/Reset.png', action: 'reset', tooltip: '重置' },
];

const onToolClick = (action: string) => {
  if (action === 'measure-height') {
    startHeightMeasure();
  } else if (action === 'measure-distance') {
    startDistanceMeasure();
  } else if (action === 'measure-area') {
    startAreaMeasure();
  } else if (action === 'profile-analysis') {
    activate(AnalysisType.Profile);
  } else if (action === 'pipeline-roaming') {
    // 管道漫游
  } else if (action === 'reset') {
    clearAllAnalysis();
    stopAll();
  }
};

const cameraInfo = reactive<CameraInfo>({
  longitude: '0',
  latitude: '0',
  height: '0',
  heading: '0',
  pitch: '0',
  roll: '0',
  cartesian3Position: SuperMap3D.Cartesian3.ZERO,
});
const mousePosition = ref(null);

// 计算属性
const formattedCameraInfo = computed(() => ({
  经度: `${cameraInfo.longitude}°`,
  纬度: `${cameraInfo.latitude}°`,
  高度: `${cameraInfo.height} 米`,
  方向: `${cameraInfo.heading}°`,
  俯仰: `${cameraInfo.pitch}°`,
  翻滚: `${cameraInfo.roll}°`,
}));

const formattedMousePosition = computed(() => {
  if (!mousePosition.value) return '未点击';
  return `点击位置：经度 ${mousePosition.value.longitude}, 纬度 ${mousePosition.value.latitude}, 高度 ${mousePosition.value.height}`;
});

onMounted(async () => {
  // const profile = new SuperMap3D.Profile(__viewer.scene); // 确保已正确初始化 Profile
  // analysis = new ProfileTools(__viewer, profile, new Tooltip());

  initMeasureHandlers(__viewer);
  // 监听右键点击获取坐标
  getMousePosition(__viewer, (position) => {
    mousePosition.value = position;
  });

  // viewer 是你初始化 Cesium 时的 viewer 对象
  startCameraInfoTracking(__viewer, (info) => {
    //Object.assign 用于合并对象或创建一个对象的浅拷贝
    Object.assign(cameraInfo, info);
  });
});
</script>

<style scoped>
.layout {
  position: relative;
  z-index: 2; /* 保证高于cesium地图 */
  display: flex;
  height: 100vh;
  width: 100vw;
  pointer-events: none; /* 先禁用鼠标事件，具体可根据需要调整 */
}

.sidebar-left {
  pointer-events: auto; /* 激活左栏交互 */
  width: 800px;
  height: 100vh;
  padding: 30px;
}

.main-content {
  flex: 1;
  /* 留空，地图已经挂在App.vue，或者叠加控件 */
}

.sidebar-right {
  position: absolute;
  right: -2px;
  pointer-events: auto; /* !* 激活右栏交互 */
  width: 300px;
  height: 300px;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 8px;
}

.vertical-toolbar {
  position: absolute;
  right: 10px;
  top: 250px;
  z-index: 3;
}
</style>
